import { Button, Space } from 'ant-design-vue';
import { dialog } from '@gis/lib/components/antd-dialog';
import CommonTable from '@gis/lib/components/vex-table/index.vue';
import AntdForm from '@gis/lib/components/antd-form/index.js';
import { getMsgNotifyPeoplePage, sendNotifyMsgToPhone, zzPeopleTypeList } from '@gis/lib/api';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { h } from 'vue';

const View = {
  name: 'MsgNotify',
  props: {
    content: { type: String, default: '' },
  },
  data() {
    return {
      typeList: [], //人员类型列表
      unitList: [], //单位列表
      formData: {},
      selectedRowKeys: [],
      selectedPhones: [],
      columns: [
        { title: '姓名', dataIndex: 'name' },
        { title: '所属单位', dataIndex: 'unit_name' },
        { title: '电话', dataIndex: 'phone', width: 100 },
        { title: '类型', dataIndex: 'type_name' },
        // { title: '岗位', dataIndex: 'emergency_post', width: 200 },
      ],
    };
  },
  computed: {
    paramsData() {
      const { area_code } = useUserInfoStore();
      return Object.assign({}, this.formData, {
        area_code: area_code,
        // is_emergency_crew: 1,
        status: 1,
      });
    },
  },
  created() {
    this.getTypeListAsync();
  },
  methods: {
    formChange(data) {
      this.formData = data;
    },
    async getTypeListAsync() {
      const data = await this.handleCommonResult(await zzPeopleTypeList({ type: 1 }));
      this.typeList = data.map((item) => Object.assign({}, { label: item.name, value: item.code }));
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedPhones = selectedRows.map((item) => item.phone);
    },
    async notify() {
      if (!this.selectedPhones || !this.selectedPhones.length) {
        return this.$message.error('请勾选需要通知的人员!');
      }
      const params = {
        phone: this.selectedPhones.join(','),
        content: this.content,
      };
      return this.handleFormResult(await sendNotifyMsgToPhone(params), {
        baseText: '发送',
        onOk: () => {
          this.$emit('closeDialog');
        },
      });
    },
    async getDataAsync(params) {
      return this.handleTableResult(await getMsgNotifyPeoplePage(params));
    },
  },
  render() {
    return h(
      'div',
      {
        style: {
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          height: '100%',
          padding: '16px 0 0',
        },
      },
      [
        h(AntdForm, {
          ref: 'Form',
          style: {
            padding: '20px',
          },
          options: [
            { label: '名称', component: 'a-input', field: 'name' },
            { label: '人员类型', component: 'a-select', field: 'type_code', props: { options: this.typeList } },
            { label: '所属单位', component: 'a-input', field: 'unit_name' },
          ],
          onChange: (val) => this.formChange(val),
        }),
        h(CommonTable, {
          ref: 'Table',
          showToolbar: false,
          columns: this.columns,
          fetch: this.getDataAsync,
          fetchParams: this.paramsData,
          // rowSelection: {
          //   selectedRowKeys: this.selectedRowKeys,
          //   onChange: this.onSelectChange,
          // },
          scopedSlots: {
            index: ({ index }) => index + 1,
          },
        }),
        h(Space, { style: { padding: '10px', display: 'flex', justifyContent: 'flex-end' } }, [
          h(Button, { attrs: { type: 'primary' }, on: { click: this.notify } }, '一键通知'),
        ]),
      ]
    );
  },
};

export function openMsgNotifyDialog(data, afterClose) {
  if (typeof afterClose !== 'function') {
    afterClose = () => {};
  }
  data = Object.assign({ msg: '' }, data);
  dialog({
    content: View,
    contentProps: { content: data.msg },
    dialogProps: {
      title: '短信通知',
      width: 'large',
      height: 'fixed',
      footer: null,
      afterClose: afterClose,
    },
  });
}
